<!--<template>
  &lt;!&ndash;  <div className="player-container">
      <div ref="barrageContainer" class="barrage-container"></div>
      <div ref="player" class="dplayer-container"></div>
      <input v-model="barrageText" type="text" placeholder="输入弹幕内容" />
      <button @click="sendBarrage">发送弹幕</button>
    </div>&ndash;&gt;
  <div>
    <div ref="playerContainer" class="dplayer-container">
      <div ref="barrageContainer" class="barrage-container"></div>
      <video ref="videoElement" class="dplayer-video" controls></video>
    </div>
    <div>
      <input v-model="barrageText" type="text" placeholder="输入弹幕内容"/>
      <button @click="sendBarrage">发送弹幕</button>
    </div>
  </div>
</template>

<script>
import DPlayer from 'dplayer';

export default {
  data() {
    return {
      player: null, // DPlayer实例
      barrages: [], // 存储弹幕的数组
      barrageSpeed: 3, // 弹幕滚动速度
      barrageText: '',
      barrageInterval: 1000, // 弹幕发送间隔，单位ms
      timer: null,
    };
  },
  mounted() {
    this.initPlayer();
    this.initBarrage();
    this.adjustBarrageContainerSize();
    window.addEventListener('resize', this.adjustBarrageContainerSize);
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
    window.removeEventListener('resize', this.adjustBarrageContainerSize);
  },
  methods: {
    /*initPlayer() {
      console.log(this.$refs.player); // 确保这个元素存在
      const dp = new DPlayer({
        container: this.$refs.player,
        video: {
          url: 'http://192.168.123.17:80/account/video',
          // 其他视频配置...
        },
        // 其他DPlayer配置...
      });

      if (dp) {
        this.playerInstance = dp; // 保存DPlayer实例以便后续使用
        console.log(this.playerInstance); // 确保DPlayer实例被正确创建
      } else {
        console.error('DPlayer实例化失败');
      }
    },*/
    initPlayer() {
      const video = this.$refs.videoElement;
      // 设置视频源和其他属性
      video.src = 'http://192.168.123.17:80/account/video'; // 替换为你的视频路径

      this.player = new DPlayer({
        container: this.$refs.playerContainer,
        video: {
          url: video.src,
          // 其他视频配置...
        },
        // 其他DPlayer配置...
      });
    },
    initBarrage() {
      this.timer = setInterval(() => {
        this.barrages.forEach(barrage => {
          barrage.left -= this.barrageSpeed;
          if (barrage.left < -window.innerWidth) {
            this.removeBarrage(barrage);
          }
        });
        this.renderBarrages();
      }, 20); // 每20ms更新一次弹幕位置
    },
    sendBarrage() {
      if (!this.barrageText) return;
      const barrage = {
        text: this.barrageText,
        time: Date.now(),
        top: Math.random() * this.$refs.barrageContainer.offsetHeight,
        left: window.innerWidth,
        speed: this.barrageSpeed,
      };
      this.barrages.push(barrage);
      this.barrageText = ''; // 清空输入框
    },
    removeBarrage(barrage) {
      this.barrages = this.barrages.filter(b => b !== barrage);
    },
    renderBarrages() {
      const container = this.$refs.barrageContainer;
      container.innerHTML = '';
      console.log(this.barrages)
      this.barrages.forEach(barrage => {
        const barrageElement = document.createElement('div');
        barrageElement.style.position = 'absolute';
        barrageElement.style.top = `${barrage.top}px`;
        barrageElement.style.left = `${barrage.left}px`;
        barrageElement.style.whiteSpace = 'nowrap';
        barrageElement.style.color = 'white';
        barrageElement.style.fontSize = '16px';
        barrageElement.style.padding = '4px 8px';
        barrageElement.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
        barrageElement.style.borderRadius = '4px';
        barrageElement.textContent = barrage.text;
        container.appendChild(barrageElement);
      });
    },
    adjustBarrageContainerSize() {
      const playerContainer = this.$refs.playerContainer;
      const playerAspectRatio = 16 / 9; // 假设播放器是16:9的比例
      const playerWidth = playerContainer.offsetWidth;
      const playerHeight = playerWidth / playerAspectRatio;
      this.$refs.barrageContainer.style.height = `${playerHeight}px`;
    },
  }
};
</script>

<style scoped>
.dplayer-container {
  /*position: relative;
  width: 100%;
  padding-bottom: 56.25%;*/
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}
.dplayer-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding-bottom: 56.25%; /* 保持16:9的宽高比 */
}
.barrage-container > div {
  /* 单个弹幕的样式 */
  position: absolute;
  white-space: nowrap;
  color: white; /* 假设背景是深色，所以弹幕用白色 */
  background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
  padding: 4px 8px; /* 弹幕内边距 */
  border-radius: 4px; /* 弹幕圆角 */
  animation: moveBarrage 5s linear infinite;
  /* 其他样式... */
}
.barrage-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  font-family: 'Microsoft YaHei', sans-serif;
  z-index: 1
}
@keyframes moveBarrage {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}
</style>-->
<template>
  <div style="position: relative;">
    <div ref="barrageContainer" class="barrage-container"></div>
    <div ref="player" class="dplayer-container"></div>
    <input v-model="barrageText" type="text" placeholder="输入弹幕内容" />
    <button @click="sendBarrage">发送弹幕</button>
  </div>
</template>

<script>
import DPlayer from 'dplayer';

export default {
  data() {
    return {
      extension: '',
      fielName: '',
      bucketName: '',
      player: null,
      barrages: [],
      barrageText: '',
      barrageSpeed: 3, // 弹幕速度，单位px/s
      barrageInterval: 1000, // 弹幕发送间隔，单位ms
      timer: null,
    };
  },
  mounted() {
    this.initPlayer();
    this.initBarrage();
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
  methods: {
    initPlayer() {
      console.log(this.$refs.player); // 确保这个元素存在
      console.log(this.$route.params)
      this.fielName = this.$route.params.filename
      this.extension = this.$route.params.extension
      this.bucketName = this.$route.params.bucketName
      const dp = new DPlayer({
        theme: '#FADFA3',
        loop: true,
        lang: 'zh-cn',
        screenshot: true,
        hotkey: true,
        preload: 'auto',
        volume: 0.7,
        mutex: true,
        container: this.$refs.player,
        video: {
          //url: 'http://192.168.123.17:80/account/video',
          url: 'http://192.168.123.17:9070/video/' + this.fielName + this.extension,
          //url: 'http://192.168.123.17:9020/'+this.bucketName +'/' + this.fielName,
          // 其他视频配置...
        },
        // 其他DPlayer配置...
      });
      if (dp) {
        this.playerInstance = dp; // 保存DPlayer实例以便后续使用
        console.log(this.playerInstance); // 确保DPlayer实例被正确创建
      } else {
        console.error('DPlayer实例化失败');
      }
    },
    initBarrage() {
      this.timer = setInterval(() => {
        this.barrages.forEach(barrage => {
          barrage.left -= this.barrageSpeed;
          if (barrage.left < -window.innerWidth) {
            this.removeBarrage(barrage);
          }
        });
        this.renderBarrages();
      }, 20); // 每20ms更新一次弹幕位置
    },
    sendBarrage() {
      this.playerInstance
      if (!this.barrageText) return;
      const barrage = {
        text: this.barrageText,
        time: Date.now(),
        top: Math.random() * window.innerHeight,
        left: window.innerWidth,
        speed: this.barrageSpeed,
      };
      this.barrages.push(barrage);
      this.barrageText = ''; // 清空输入框
    },
    removeBarrage(barrage) {
      this.barrages = this.barrages.filter(b => b !== barrage);
    },
    renderBarrages() {
      const container = this.$refs.barrageContainer;
      container.innerHTML = '';
      this.barrages.forEach(barrage => {
        const barrageElement = document.createElement('div');
        barrageElement.style.position = 'absolute';
        barrageElement.style.top = `${barrage.top}px`;
        barrageElement.style.left = `${barrage.left}px`;
        barrageElement.style.whiteSpace = 'nowrap';
        barrageElement.style.color = 'white';
        barrageElement.style.fontSize = '16px';
        barrageElement.style.padding = '4px 8px';
        barrageElement.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
        barrageElement.style.borderRadius = '4px';
        barrageElement.textContent = barrage.text;
        container.appendChild(barrageElement);
      });
    },
  },
};
</script>

<style scoped>
.dplayer-container {
  position: relative;
  width: 100%;
  height: 56.25%;
  /*height: 50%;
  padding-bottom: 56.25%;*/ /* 16:9 Aspect Ratio */
}

.barrage-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  font-family: 'Microsoft YaHei', sans-serif;
  z-index: 1;
}
</style>
